<template>
  <!-- 添加 ref 标识 -->
  <div class="left-center" ref="chartContainer"></div>
</template>

<script>

export default {
  data() {
    return {
      data: [
              { value: 24000, name: "办公耗电量" },
              { value: 6400, name: "生产用水量" },
              { value: 0, name: "办公用水量" },
            ]
    };
  },
  mounted() {
    // 3. 确保在 mounted 生命周期调用
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 2. 使用 Vue 的 ref 获取 DOM 元素
      const chartDom = this.$refs.chartContainer;
      if (!chartDom) return;

      // 4. 初始化图表
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          bottom: "5%",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            data:this.data
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang='scss' scoped>
.left-center {
  /* 5. 确保容器有明确尺寸 */
  width: 100%;
  height: 250px; /* 或任意固定值 */
}
</style>